import React, { Component } from 'react';
import PropTypes from 'prop-types';
import WorkThumbnail from 'components/WorkThumbnail.js';

export default class MyWorkList extends Component {
  constructor(props) {
    super(props);
    this.unpublish = this.unpublish.bind(this);
    this.delete = this.delete.bind(this);
  }

  unpublish(assetId) {
    if (this.props.unpublish) {
      this.props.unpublish(assetId);
    }
  }

  delete(assetId) {
    if (this.props.delete) {
      this.props.delete(assetId);
    }
  }

  renderWorkList() {
    const isMine = this.props.isMine !== undefined ? this.props.isMine : true;
    return this.props.workList && this.props.workList.map(work => (<WorkThumbnail
      isMine={isMine}
      key={work.id}
      work={work}
      unpublish={this.unpublish}
      delete={this.delete}
      router={this.props.router}
      location={this.props.location}
    />));
  }

  renderDummyElements() {
    const dummies = [1, 2, 3, 4, 5, 6, 7];
    return dummies.map(dmy => <div key={dmy} className="thumb-item dummy" />);
  }

  render() {
    const totalCountLabel = `${this.props.totalCount || 0} 个作品`;
    return (
      <div id="works-mine">
        <div className="header">
          <span className="title">{this.props.title}</span>
          <span className="total-count">{totalCountLabel}</span>
        </div>
        <div className="thumb-list">
          {this.renderWorkList()}
          {this.renderDummyElements()}
        </div>
      </div>
    );
  }
}

MyWorkList.propTypes = {
  title: PropTypes.string,
  totalCount: PropTypes.number,
  workList: PropTypes.arrayOf(PropTypes.shape({
    workId: PropTypes.string,
    workName: PropTypes.string,
    workThumbnail: PropTypes.string,
    workAuthorId: PropTypes.string,
    workAuthorName: PropTypes.string,
    workAuthorAvatar: PropTypes.string,
    workLikes: PropTypes.number,
    workLiked: PropTypes.bool,
  })),
  unpublish: PropTypes.func,
  delete: PropTypes.func,
  isMine: PropTypes.bool,
  router: PropTypes.object,
  location: PropTypes.object,
};
